/**
 * 泛娱区块链 - Mine
 * https://menger.me
 * @大梦
 */

'use strict';

import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import NavigationBar from '../../component/navigation/NavigationBar'
import ListView from '../../component/list/ListView';
import NewWestItem from '../../component/item/NewWestItem'
import ImageView from '../../component/common/ImageView';

class NewWest extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
        };
        this.page = 1;
        this.limit = 10;
    }

    componentDidMount() {
        this.requestDataSources();
    }

    componentWillMount() {
    }

    requestDataSources = async () => {
        const limit = this.limit;
        let url = ServicesApi.FLASH_QUERY
        let data = {
            limit,
            page: this.page
        }
        const result = await Services.post(url, data)
        if (result.code === 0) {
            if (this.page === 1) {
                this.setState({ dataSource: result.data })
            } else if (this.page > 1 && result.data.length != 0) {
                let oldData = this.state.dataSource.slice()
                oldData = oldData.concat(result.data)
                this.setState({ dataSource: oldData })
            }
        }
        this._listViewRef && this._listViewRef.stopRefresh()
        this._listViewRef && this._listViewRef.stopEndReached({ allLoad: result.data.length < limit })

    };
    _onPressItem = (item, index) => {
        RouterHelper.navigate('专题详情', 'WestDetails')
    }

    _onRefresh = (stopRefresh) => {
        this.page = 1
        this.requestDataSources()
    };

    _onEndReached = (stopEndReached) => {
        this.page++
        this.requestDataSources()
    };


    _renderItem = ({ item, index }) => {
        return (
            <NewWestItem
                item={item}
                onPress={() => { this._onPressItem(item, index) }}
                {...this.props}
            />
        )
    };

    _keyExtractor = (item, index) => {
        return `item${index}`
    };

    _captureRef = (v) => {
        this._listViewRef = v
    };


    render() {
        const { dataSource } = this.state
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={'最新专题'}
                />
                <ListView
                    ref={this._captureRef}
                    initialRefresh={false}
                    enableLoadMore={true}
                    enableRefresh={true}
                    data={dataSource}
                    keyExtractor={this._keyExtractor}
                    renderItem={this._renderItem}
                    ItemSeparatorComponent={null}
                    onRefresh={this._onRefresh}
                    onEndReached={this._onEndReached}
                    ListHeaderComponent={null}
                    style={styles.listView}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    headerLine: {
        width: Theme.screenWidth,
        height: Theme.minPixel,
        backgroundColor: '#979797',
    },
    listView: {
        flex: 1,
    },
});

export default NewWest